<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        background: none;
      }
      
tr:last-child td {
  padding-bottom: 0;
}
.ant-statistic-content {
  font-size: 20px;
  line-height: 28px;
}
#components-page-header-demo-responsive .content {
  display: flex;
}
@media (max-width: 576px) {
  #components-page-header-demo-responsive .content {
    display: block;
  }
    </style>
    <script>
      // sync parent style generated by style-loader into iframe
      if (parent.location.port) {
        [].forEach.call(parent.document.getElementsByTagName('head')[0].querySelectorAll('style'), function(node) {
          document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      } else {
        // append parent stylesheet
        [].forEach.call(parent.document.querySelectorAll('link[rel=stylesheet]'), function(node) {
          node && document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      }
    </script>
  </head>
  <body>
    <div id="components-page-header-demo-responsive"></div>
    <script>
      function require(module) {
        if (module === 'react-router') {
          return window.ReactRouter;
        }
        if (module === 'react-router-dom') {
          return window.ReactRouterDOM;
        }
        return window.parent[module];
      }
      var mountNode = document.getElementById('components-page-header-demo-responsive');
      var React = require('react');
      var ReactDOM = require('react-dom');
    </script>
    
    <script>
      function bishengPluginReactPreviewer() {
  var React = require("react");

  var ReactDOM = require("react-dom");

  var _antd = require("antd");

  var TabPane = _antd.Tabs.TabPane;

  var renderContent = function renderContent() {
    var column = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
    return /*#__PURE__*/React.createElement(_antd.Descriptions, {
      size: "small",
      column: column
    }, /*#__PURE__*/React.createElement(_antd.Descriptions.Item, {
      label: "Created"
    }, "Lili Qu"), /*#__PURE__*/React.createElement(_antd.Descriptions.Item, {
      label: "Association"
    }, /*#__PURE__*/React.createElement("a", null, "421421")), /*#__PURE__*/React.createElement(_antd.Descriptions.Item, {
      label: "Creation Time"
    }, "2017-01-10"), /*#__PURE__*/React.createElement(_antd.Descriptions.Item, {
      label: "Effective Time"
    }, "2017-10-10"), /*#__PURE__*/React.createElement(_antd.Descriptions.Item, {
      label: "Remarks"
    }, "Gonghu Road, Xihu District, Hangzhou, Zhejiang, China"));
  };

  var extraContent = /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      width: 'max-content',
      justifyContent: 'flex-end'
    }
  }, /*#__PURE__*/React.createElement(_antd.Statistic, {
    title: "Status",
    value: "Pending",
    style: {
      marginRight: 32
    }
  }), /*#__PURE__*/React.createElement(_antd.Statistic, {
    title: "Price",
    prefix: "$",
    value: 568.08
  }));

  var Content = function Content(_ref) {
    var children = _ref.children,
        extra = _ref.extra;
    return /*#__PURE__*/React.createElement("div", {
      className: "content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "main"
    }, children), /*#__PURE__*/React.createElement("div", {
      className: "extra"
    }, extra));
  };

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_antd.PageHeader, {
    className: "site-page-header-responsive",
    onBack: function onBack() {
      return window.history.back();
    },
    title: "Title",
    subTitle: "This is a subtitle",
    extra: [/*#__PURE__*/React.createElement(_antd.Button, {
      key: "3"
    }, "Operation"), /*#__PURE__*/React.createElement(_antd.Button, {
      key: "2"
    }, "Operation"), /*#__PURE__*/React.createElement(_antd.Button, {
      key: "1",
      type: "primary"
    }, "Primary")],
    footer: /*#__PURE__*/React.createElement(_antd.Tabs, {
      defaultActiveKey: "1"
    }, /*#__PURE__*/React.createElement(TabPane, {
      tab: "Details",
      key: "1"
    }), /*#__PURE__*/React.createElement(TabPane, {
      tab: "Rule",
      key: "2"
    }))
  }, /*#__PURE__*/React.createElement(Content, {
    extra: extraContent
  }, renderContent())));
}
    </script>
    <script>
      var ReactDOM = require('react-dom');
      var app = bishengPluginReactPreviewer();

      if (true) {
        var container = null;
        app = React.createElement(
          require('antd').ConfigProvider,
          {
            getPopupContainer() { return container; },
          },
          [
            React.cloneElement(app, { key: 'AppContent' }),
            React.createElement('div', {
              key: 'InjectProviderHolder',
              ref(node) { container = node; },
            }),
          ],
        );
      }

      ReactDOM.render(app, mountNode);
    </script>
    <script src="https://unpkg.com/theme-switcher/dist/index.min.js"></script>
    <script>
      var timestamp = new Date().getTime();
      // handle message with parent
      function handleMessage(evt) {
        try {
          var result = JSON.parse(event.data);
          switch (result.action) {
            //
            case 'change.theme': {
              var themeData = result.data;
              var theme = themeData.theme;
              var themeConfig = themeData.themeConfig;
              if (window.ThemeSwitcher) {
                var themeSwitcher = window.ThemeSwitcher(themeConfig);
                themeSwitcher.switcher({
                  theme: theme,
                  useStorage: false,
                });
              }
              break;
            }
            default: {}
          }
        } catch (_) {
          console.error('[Demo] handleMessage error', _);
        }
      }

      window.addEventListener('message', handleMessage, false);
    </script>
  </body>
</html>
